<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="7">
                <el-card class="box-card oneCard">
                    <el-tree default-expand-all :data="dataTree" :props="defaultProps" @node-click="handleNodeClick"
                    highlight-current
                        v-loading="loading">
                        <span slot-scope="{ node, data }">
                            <i v-if="data.children" class="el-icon-folder tree_icon"></i>
                            <i v-else class="el-icon-document tree_icon"></i>
                            <span style="margin-left: 10px">{{ node.label }}</span>
                        </span>
                    </el-tree>
                    
                </el-card>
            </el-col>
            <el-col :span="17">
                <el-card class="box-card">
                    <div class="addBtnWra">
                        <el-button size="medium" icon="el-icon-plus" class="addBtn" type="primary" @click="handleAdd()">新增栏目</el-button>
                    </div>
                    <el-form :model="form" :rules="rules" ref="form" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="栏目名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="父级" prop="parentId">
                            <el-cascader :options="dataTree" :props="selectCate" :show-all-levels="false" clearable
                                filterable ref="cascader" v-model="form.parentId" @change="selectValue"></el-cascader>
                        </el-form-item>
                        <el-form-item label="排序" prop="sort">
                            <el-input-number v-model.number="form.sort" :min="0" label="描述文字"></el-input-number>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio label="1">启用</el-radio>
                                <el-radio label="0">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否展示此栏目" prop="isDisplay">
                            <el-radio-group v-model="form.isDisplay">
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="isEdit">
                            <el-button class="bigBtn" type="primary" @click="handleEdit('form')">立即修改</el-button>
                            <el-button type="danger" @click="hanldeDelete('form')">删除</el-button>
                        </el-form-item>
                        <el-form-item v-else>
                            <el-button class="bigBtn" type="primary" @click="submitForm('form')">立即创建</el-button>
                            <el-button @click="resetForm('form')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <ColumnDialog ref="dialogContent" @getTypeTree="getTypeTree" />
    </div>
</template>
<script>
import { getColumnTree, getColumnAdd ,getColumnEdit,getColumnDelete} from "@/request/api/new"
import pinyin from 'js-pinyin'
import ColumnDialog from "./columnDialog.vue"
export default {
    components:{
        ColumnDialog
    },
    data() {
        // 设置序号为整数包括0
        var checkInt = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入序号"));
            } else {
                var pwdRegex = new RegExp("^(0|[1-9][0-9]*|-[1-9][0-9]*)$");
                if (!pwdRegex.test(value)) {
                    callback(new Error("请输入整数"));
                } else {
                    callback();
                }
            }
        };
        return {
            dataTree: [],
            defaultProps: {
                children: "children",
                label: "name",
            },
            form: {
                name: "",//栏目名称
                parentId: "",//父类ID
                sort: 1,//排序
                status: '1',//0停用，1启用
                isDisplay:"0"//是否展示此栏目：0是，1否
            },
            rules: {
                name: [
                    { required: true, message: '请输入栏目名称', trigger: 'blur' },
                ],
                sort: [
                    { required: true, validator: checkInt, trigger: 'change' },
                ],
                parentId: [
                    { required: true, message: '请选择父栏目', trigger: 'change' },
                ],
            },
            selectCate: {
                checkStrictly: true,
                label: "name",
                children: "children",
                value: "id",
                getCheckedNodes: true,
                expandTrigger: "hover",
            },
            isEdit: false,
            loading: true
        }
    },
    created() {
        this.getTypeTree()
    },
    methods: {
        // 获取产品类型树
        getTypeTree() {
            getColumnTree().then(res => {
                if (res.data.code === 200) {
                    this.loading = false
                    this.dataTree = res.data.result
                }
            })
        },
        // 父级
        selectValue() {
            this.$refs.cascader.dropDownVisible = false;
        },
        // 点击左侧树获取信息
        handleNodeClick(data) {
            this.form = { ...data };
            this.isEdit = true;
        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 新增
        handleAdd(){
            this.$refs.dialogContent.open()
            // this.isEdit = false;
            // let params={
            //     name: "",//栏目名称
            //     parentId: "",//父类ID
            //     sort: 1,
            //     status: '1',//0停用，1启用
            //     isDisplay:"0"//是否展示此栏目：0是，1否
            // }
            // this.form=params
        },
        // 创建
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    let nodesInfo = this.$refs["cascader"].getCheckedNodes();
                    if (nodesInfo.length !== 0) {
                        this.form.parentId = nodesInfo[0].value;
                    }
                    getColumnAdd(this.form).then((res) => {
                            loading.close();
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.message,
                                type: "success",
                            });
                            this.getTypeTree()
                            this.$refs.form.resetFields();
                             
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 立即修改
        handleEdit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let nodesInfo = this.$refs["cascader"].getCheckedNodes();
                    if (nodesInfo.length !== 0) {
                        this.form.parentId = nodesInfo[0].value;
                    }
                    getColumnEdit(this.form).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.message,
                                type: "success",
                            });
                            this.getTypeTree()
                            this.$refs.form.resetFields();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 删除
        hanldeDelete() {
            this.$confirm("确定删除该栏目及该栏目下相关资讯吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                getColumnDelete(this.form.id).then((res) => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                        });
                        this.getTypeTree()
                        this.$refs.form.resetFields();
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            })
        }
    }
}
</script>
<style lang="less" scoped>
.el-card {
    overflow-y: auto;
    height: 600px;
}

.el-cascader {
    width: 400px;
}

.el-input {
    width: 400px;
}

.bigBtn {
    width: 140px;
}
.tree_icon{
    color:#67C23A;
}
.oneCard{
    position: relative;
}
.addBtnWra{
    // position: absolute;
    // bottom:10px;
    // // left:20px;
    // width:100%;
    // text-align: center;
    // box-sizing: border-box;
    padding-left:100px;
    margin-bottom:15px;
}
.addBtn{
    width:180px;
}
</style>

